<!--
* @author wn
* @date 2022/12/16 14:42:34
* @description: 中国地图 组件
!-->
<template>
	<div ref="chinaMap" style="height: 100%"></div>
</template>
<script setup>
import elementResizeDetectorMaker from 'element-resize-detector'
import * as echarts from 'echarts'
import { chinaMapData } from '@/assets/echarts/chinaMap'
import { onMounted, ref } from 'vue'

const chinaMap = ref('')
let myEcharts = null
// 地图数据
const option = {
	title: {
		text: '城市销量',
		left: '45%',
		textStyle: {
			color: '#fff',
			fontSize: 20,
			textShadowBlur: 10,
			textShadowColor: '#3fffff',
		},
	},
	// 提示框
	tooltip: { trigger: 'item' },
	geo: {
		// 地理坐标组件
		type: 'map',
		map: 'chinaMap', // 自定义的名字
		roam: true, // 平移缩放
		zoom: 1.2, // 缩放比例
		// center: [121.43, 37.45], // 初始化 中心点
		/* 		label: {
			show: true, // 显示 市 名称
			color: 'red',
			fontSize: 8,
		}, */
		itemStyle: {
			areaColor: '#0099ff', // 地图颜色
			borderColor: '#00ffff', // 边框颜色
			shadowColor: 'rgba(230,130,70,0.5)', // 边框 阴影
			shadowBlur: 30, // 阴影模糊度
			emphasis: {
				focus: 'self', // 选中自己 高亮
			},
		},
	},
	// 视觉映射效果  控制条
	visualMap: {
		type: 'continuous', // 连续的
		nim: 1000,
		max: 5000,
		calculable: true, // 滑动效果开启
		inRange: {
			color: ['#50a3ba', '#eac736', '#d94e5d'], // 颜色设置
		},
		textStyle: {
			color: '#fff', // 指示器 文本颜色
		},
	},
	// 散点图 -- geo 平级
	series: [
		{
			type: 'effectScatter', // 涟漪 效果的 散点图
			data: [
				{
					name: '北京市', // 数据名字
					value: [116.46, 39.92, 2000], // 经度 纬度 携带数据
				},
				{
					name: '烟台市', // 数据名字
					value: [121.43, 37.45, 4000], // 经度 纬度 携带数据
				},
				{
					name: '西安市', // 数据名字
					value: [108.45, 34, 3000], // 经度 纬度 携带数据
				},
				{
					name: '广州', // 数据名字
					value: [113.23, 23.16, 1000], // 经度 纬度 携带数据
				},
			],
			coordinateSystem: 'geo', // 以地图为参考定位
			// 涟漪效果的 配置
			rippleEffect: {
				number: 2, // 波纹数量
				scale: 4, // 波纹大小
			},
			itemStyle: {
				color: 'red', // 红色散点
			},
		},
	],
}
// 监听 页面 大小 改变
/* window.addEventListener('resize', () => {
	myEcharts.resize()
}) */
// 监听  div 的 大小变化
const erd = elementResizeDetectorMaker()
onMounted(() => {
	echarts.registerMap('chinaMap', chinaMapData)
	myEcharts = echarts.init(chinaMap.value)
	myEcharts.setOption(option)

	erd.listenTo(chinaMap.value, () => {
		myEcharts.resize()
	})
})
</script>
